<script setup>
import { ref } from "vue";
// 获取屏幕边界到安全区距离
const { safeAreaInsets } = uni.getSystemInfoSync();

// 定义数据
const array = ref([
  "北京",
  "上海",
  "广州",
  "深圳",
  "南昌",
  "赣州",
  "九江",
  "全部城市",
]);
const index = ref(0);
const selectedCity = ref("请选择城市");
const searchQuery = ref("");

// 绑定事件
const bindPickerChange = (e) => {
  index.value = e.detail.value;
  selectedCity.value = array.value[e.detail.value];
  emit("city-selected", selectedCity.value);
};

const handleSearchInput = () => {
  emit("search-query", searchQuery.value);
};

// 定义 emit 事件
const emit = defineEmits(["city-selected", "search-query"]);
</script>

<template>
  <!-- 顶部 -->
  <view class="navbar" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
    <view class="pick">
      <view
        :style="{
          fontSize:
            selectedCity === '请选择城市' || selectedCity === '全部城市'
              ? '23rpx'
              : '40rpx',
        }"
      >
        {{ selectedCity }}
      </view>
      <picker @change="bindPickerChange" :value="index" :range="array">
        <view class="triangle-down" @tap="openCityPicker">▼</view>
      </picker>
    </view>
    <view class="search-box">
      <uni-icons type="search" size="18" color="#999"></uni-icons>
      <input
        v-model="searchQuery"
        type="text"
        placeholder="你想住哪儿"
        @tap="handleSearchInput"
      />
    </view>
  </view>
</template>
<style scoped lang="scss">
// 导航栏
.navbar {
  display: flex;
  align-items: center;
  padding: 8rpx;
  height: 120rpx;
}
// 选择城市
.pick {
  display: flex;
  height: 80rpx;
  /* 垂直居中 */
  align-items: center;
  /* 水平居中 */
  justify-content: center;
  .triangle-down {
    margin-left: 10rpx;
    font-size: 35rpx;
    color: black;
    cursor: pointer;
  }
}
//搜索框
.search-box {
  display: flex;
  align-items: center;
  padding: 10rpx;
  background-color: #f2f2f2;
  border-radius: 20rpx;
  height: 60rpx;
  width: 360rpx;
  margin-left: 20rpx;
  uni-icons {
    margin-right: 10rpx;
  }

  input {
    font-size: 32rpx;
    flex: 1;
    padding: 10rpx;
    border: none;
    outline: none;
    background-color: transparent;
  }
}
</style>
